<template>
    <div>
        <v-title :title="title"></v-title>
        <div class="preview">
            <div class="item" v-for="item in list" :key="item.title" @click="jumpPage(item)">
                <span>{{item.value}}</span>
                <p>{{item.title}}</p>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import vTitle from '../home-title/index.vue'

  @Component({
    components:{
      vTitle
    }
  })
  export default class Boss extends Vue {
    @Prop(String) title!: string
    @Prop({
      default: () => []
    }) list

    jumpPage (item) {
        this.$router.push({path:item.path})
    }
  }
</script>
<style lang="less">
    .preview {
        display: flex;
        justify-content: space-around;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 10px;
        .item {
            height: 170px;
            width: 160px;
            font-size: 60px;
            text-align: center;
            cursor: pointer;
            span {
                line-height: 100px;
            }
            p {
                font-size: 24px;
                color: #fff;
                padding-top: 14px;
            }
            &:first-child {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo1.png") center no-repeat /100%;
                color: #F55205;

            }
            &:nth-child(2) {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo2.png") center no-repeat /100%;
                color: #5CB87A;
            }
            &:nth-child(3) {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo3.png") center no-repeat /100%;
                color: #4E93FF;
            }
            &:nth-child(4) {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo4.png") center no-repeat /100%;
                color: #F8C62E;
            }
            &:nth-child(5) {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo5.png") center no-repeat /100%;
                color: #4BB6AC;
            }
            &:nth-child(6) {
                background: url("https://hpx-boss.oss-cn-qingdao.aliyuncs.com/static/todo6.png") center no-repeat /100%;
                color: #7886CB;
            }
        }
    }
</style>
